<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_4414341_70wp6mu6nk5.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }

    .banxin{
        width: 1450px;
        margin: 0 auto;
    }

    .clear:after{
        content: '';
        display: block;
        clear: both;
    }

    .body{
        background-image: url("${pageContext.request.contextPath}/static/images/1.jpg");
        width: 99.9%;
        height: 99.8%;
        background-repeat: no-repeat;
        background-size: cover;
        background-clip: border-box;
        border: 1px solid transparent;
    }

    .h1{
        font-size: 100px;
        font-family: '楷体';
        color: wheat;
        cursor: default;
    }

    .p1{
        font-size: 50px;
        font-family: '楷体';
        color: wheat;
        cursor: default;
    }

    .p2{
        font-size: 35px;
        text-align: center;
        color: white;
        font-family: '楷体';
        margin-top: 10px;
        cursor: default;
    }

    .div1{
        width: 805px;
        height: 300px;
        display: inline-block;
        position: absolute;
        top: 160px;
        left: 30px;
        border: 1px solid transparent;

    }

    .div2{
        display: inline-block;
        width: 430px;
        height: 520px;
        border: 3px solid wheat;
        padding: 20px;
        border-radius: 20px;
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        right: 0;
        top: 50px;
    }

    .div3{
        margin-left: 57px;
        color: white;
        font-weight: bold;
        font-size: 20px;
        border: 2px solid orange;
        border-radius: 8px;
        width: 315px;
        text-align: center;
        background-color: wheat;
    }

    .div4{
        width: 80%;
        text-align: center;
        margin: 15px auto;
    }

    input{
        cursor: pointer;
    }

    .inp1{
        width: 80%;
        height: 50px;
        border: 1px solid wheat;
        border-radius: 8px;
        background-color: rgba(0,0,0,.5);
        color: orange;
        font-family: '楷体';
        font-size: 18px;
        padding-left: 30px;
        box-sizing: border-box;
        margin: 15px 20px;
    }

    .inp2{
        width: 100%;
        height: 41px;
        border: 1px solid wheat;
        border-radius: 10px;
        margin-top: 10px;
        background-color: sandybrown;
        color: aliceblue;
        font-family: '楷体';
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
        transition:all 0.3s;
    }

    .code{
        width: 35%;
        height: 50px;
        border: 1px solid wheat;
        border-radius: 8px;
        background-color: rgba(0,0,0,.5);
        margin: 20px 15px;
        padding-left: 30px;
        color: darkorange;
        font-family: '楷体';
        font-size: 18px;
    }

    .findPass{
        text-decoration: none;
        color: sandybrown;
        transition: all 0.5s;
    }

    .code_img{
        vertical-align: middle;
        width: 155px;
        border: 1px solid wheat;
        padding: 5px;
        border-radius: 8px;
        margin-top: -5px;
        cursor: pointer;
    }

    span{
        cursor: default;
    }

    label span{
        cursor: pointer;
    }

    .user:before{
        font-family: 'iconfont';
        content: "\e60a";
        font-size: 20px;
        color: white;
        position:relative;
        top: 0px;
        left: 46px;
    }

    .pass:before{
        font-family: 'iconfont';
        content: "\e608";
        font-size: 20px;
        color: white;
        position:relative;
        top: 0px;
        left: 46px;
    }

    .yanzheng:before{
        font-family: 'iconfont';
        content: "\e71c";
        font-size: 20px;
        position:relative;
        top: 0px;
        left: 46px;
        color: white;
    }

    input::-webkit-input-placeholder{
        color: white;
    }

    .inp2:hover{
        color: cadetblue;
        background-color: orange;
        border: 1px solid darkorange;
    }

    .findPass:hover{
        color: pink;
    }
</style>

<script type="text/javascript">
    function changeCaptcha() {
        // 重新加载验证码图片
        document.getElementById('captchaImage').src = '${pageContext.request.contextPath}/userinfo/code?' + new Date().getTime();
    }

</script>
<body>
    <div class="body">
        <div class="banxin clear" style="position: relative">
            <div class="div1">
                <h1 class="h1">冬瓜二手车直卖网</h1>
                <p class="p1">Professional Car Sale</p>
            </div>
            <div class="div2">
                <p class="p2">二手车运营平台</p>
                <form action="${pageContext.request.contextPath}/userinfo/login" method="get">
                    <div style="margin-top: 25px;">
                        <div class="user"><input type="text" name="username" placeholder="请输入用户名" class="inp1" required></div>
                        <div class="pass"><input type="password" name="password" placeholder="请输入密码" class="inp1" required></div>
                        <div class="yanzheng">
                            <input type="text" placeholder="验证码" class="code" name="code">
                            <div style="display: inline-block">
                                <img id="captchaImage" src="${pageContext.request.contextPath}/userinfo/code" alt="验证码" onclick="changeCaptcha()" class="code_img"/>
                            </div>
                        </div>
                        <div class="div3">
                            <span>请选择你的身份：</span>
                            <label><input type="radio" value="用户" name="role"><span>用户</span></label>
                            <label><input type="radio" value="管理员" name="role"><span>管理员</span></label>
                        </div>
                        <div class="div4">
                            <a href="#"><input type="submit" value="用户登录" class="inp2"></a><br>
                            <a href="${pageContext.request.contextPath}/toRegister"><input type="button" value="用户注册" class="inp2"></a>
                            <a href="${pageContext.request.contextPath}/toFindPass" class="findPass">忘记密码？</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>
